     //公共设备管理 
<template>
  <div class="box">
    <a-card :bordered="false" style="width: 100%">
      <slot slot="title">
        <a-breadcrumb>
          <a-breadcrumb-item>设备管理</a-breadcrumb-item>
          <a-breadcrumb-item>公共设备管理 </a-breadcrumb-item>
        </a-breadcrumb>
        <span class="title">公共设备管理 </span>
      </slot>

      <a-row>
        <a-col :span="12">
          <span>设备分类: </span>
          <a-select
            placeholder="设备分类"
            style="width: 48%"
            @change="handleChange"
          >
            <a-select-option value="jack" v-for="(item,index) in options" :key="index"> {{item.label}}</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="12">
          <span>设备名称/编号: </span>
          <a-input v-model="value" placeholder="请输入" />
          <ContextButton
            class="conBtn"
            :loading="loading"
            conText="查询"
            type="primary"
          />
          <ContextButton conText="重置" class="resectBtn" />
        </a-col>
      </a-row>
    </a-card>

    <div class="mine">
      <RoomFrom
        :taberTitle="columns"
        :tablename="Building"
        :data="Buildingdata"
      ></RoomFrom>
    </div>
  </div>
</template>

<script>
import RoomFrom from '@/components/public/TaberFrom/RoomFrom'
import { Buildinglist } from "@/config/api"

export default {
  name: ' CommonEquipment',

  data() {
    return {
      Building: "设备列表",
      columns: [],
      Buildingdata: [],
      loading: false,
      value:'',
      options:[
        {
          label:'电梯',
          value:'电梯'
        },
        {
          label:'健身器材',
          value:'健身器材'
        },
        {
          label:'路灯',
          value:'路灯'
        }
      ]
    };
  },
  components: {
    RoomFrom
  },

  mounted() {
    this.getBuilding()
  },

  methods: {

    async getBuilding() {
      let { data: res } = await Buildinglist()
      console.log(res)
      let { columns, Buildingdata } = res.data
      this.columns = columns;
      this.Buildingdata = Buildingdata
      console.log(this.columns, this.Buildingdata)
    },
    handleChange(item){
      console.log(item);
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 1136px;
}
::v-deep .ant-input {
  width: 48%;
  margin-left: 8px;
}

.title {
  color: rgba(0, 0, 0, 0.8);
  font: 700 20px "微软雅黑";
  box-sizing: border-box;
}
::v-deep .ant-breadcrumb {
  margin-bottom: 10px;
}
.resectBtn {
  margin-left: 10px;
}
.conBtn {
  margin-left: 40px;
}
.mine {
  padding: 20px;
  box-sizing: border-box;
  margin-top: 20px;
  width: 1136px;
  display: flex;
  font-family: "MalayalamMN", "Malayalam MN", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  background-color: #ffffff;
  border-color: #e9e9e9;
  border-width: 1px;
  border-style: solid;
  color: #333333;
  line-height: normal;
  text-transform: none;
}
</style>